{% extends 'index.html' %}
{% load staticfiles %}
{% block title %}设置文件格式{% endblock %}

{% block header %}
    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap-datetimepicker.min.css">
{% endblock %}

{% block context %}
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-lg-offset-3">
                <h1>设置文件格式</h1>
            </div>
        </div>
                                                <!--用用户id 和随机数 生成随机数连接-->
        <form action="{% url 'upload' %}?user={{ user }}&ppid={{ ppid }}" method="POST" class="form-inline">
            {% csrf_token %}
            <div class="row">
                <div class="col-lg-6 col-lg-offset-2">
                    <div class="form-group">
                        <label>文件柜名称</label>
                        <!-- 文字输入 -->
                        <input type="text" class="form-control" placeholder="文件柜名" name="projectname">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <label>文件格式: </label>
                    <div class="form-group">
                        <label >姓名+</label>
                    </div>
                    <select name="word1" id="word1">
                        <option value="班级">班级</option>
                        <option value="部门">部门</option>
                        <option value="小组">小组</option>
                    </select>
                    <select name="word2" id="word2">
                        <option value="学号">学号</option>
                        <option value="工号">工号</option>
                        <option value="其他编号">其他编号</option>
                    </select>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="统一命名" name="word3">
                    </div>
                    <select name="word4" id="word4">
                        <option value="txt">txt</option>
                        <option value="excel">excel</option>
                        <option value="word">word</option>
                    </select>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6 col-lg-offset-2">
                    {#    截止日期    #}
                    <div class="form-group">
                        <label>选择截止日期：</label>
                        <!--指定 date标记-->
                        <div class='input-group date' id='datetimepicker'>
                            <input type='text' class="form-control" name="date"/>
                            <span class="input-group-addon">
                                 <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6 col-lg-offset-2">
                    {#  收件人  #}
                    <div class="form-group">
                        <label >请输入收件人:</label>
                        <input type="text" class="form-control" placeholder="收件人" name="username">
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-lg-6 col-lg-offset-2">
                    <label>填写备注信息:</label>
                    <textarea class="form-control" rows="5" name="otherinfo"></textarea>
                </div>
            </div>

            <div class="row col-lg-offset-2">
                <input type="submit" class="btn btn-default"  value="提交">
            </div>


        </form>
    </div>


{% endblock %}

{% block footer %}
    <script src="/static/bootstrap-3.3.7/js/moment-with-locales.min.js"></script>
    <script src="/static/bootstrap-3.3.7/js/bootstrap-datetimepicker.min.js"></script>
    <script src="/static/bootstrap-3.3.7/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script>
        $("#datetimepicker").datetimepicker({
                todayBtn: true,
                language: 'zh-CN',
            }).on('changeDate', function(e){
            $("#datetimepicker").datetimepicker('setStartDate', e.date);
        });

    </script>

{% endblock %}